<template>
  <div class="watch">
    <button @click="num++">{{ num }}</button>
    <form>
      <input placeholder="手机号" v-model="loginForm.username" />
      <input placeholder="验证码" v-model="loginForm.code" />
      <button>登录</button>
    </form>
    <input
        placeholder="输入关键字"
        v-model="keyword"
     />
    <ul>
      <li v-for="d in result" :key="d">{{ d }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        num:100,
        loginForm:{
          username:'',
          code:''
        },
        keyword:'',//搜索关键词
        result:[]//搜索结果
      }
    },
    watch:{
      //把监听的变量当做属性名,属性值是个方法,当这个变量发生变化的时候,就会执行后面这个方法
      num(){
        console.log('num发生变化');
      },
      'loginForm.username'(newVal,oldVal){
        console.log(`手机号由${oldVal}变成${newVal}`);
        // newVal === this.loginForm.username
      },
      // loginForm(){
      //   console.log('loginForm变了');
      // },
      //深度检测 对象/数组,对象中任意属性发生变化,就会执行handler方法
      loginForm: {
        deep:true,
        handler(){
          console.log('loginForm的某个属性发生变化');
        }
      },
      keyword(val){
        const script = document.createElement('script');
        script.src="https://www.baidu.com/sugrec?json=1&prod=wise&callback=fn&wd="+val
        document.body.appendChild(script)
        window.fn=data=>{
          console.log(data);
          this.result =(data.g||[]).map(i=>i.q)
        }
      }
    }
  }
</script>

<style lang="sass" scoped>

</style>
